<template>
  <div class="container">
    <!-- 栏目频道 -->
    <van-tabs v-model="activeIndex" @change="switchTab">
      <!-- 标签页title -->
      <van-tab
        v-for="(channel, i) in channels"
        :title="channel.name"
        :key="channel.id"
      >
        <!-- 频道对应的新闻列表
        需要把当前频道ID传给子组件，子组件根据ID获取不同频道数据渲染显示
        -->
        <ArticleList :ref="'alist' + i" :channelId="channel.id" />
      </van-tab>
    </van-tabs>
    <!-- 右侧图标 -->
    <span class="bar_btn" @click="showEdit = true">
      <van-icon name="wap-nav"></van-icon>
    </span>
    <!-- 修改频道弹出层组件 -->
    <ChannelEdit
      v-model="showEdit"
      :myChannels="channels"
      :activeIndex.sync="activeIndex"
    />
  </div>
</template>

<script>
// 导入新闻列表子组件
import ArticleList from './articleList'
// 导入获取频道数据后台方法
import { getMyChannels } from '@/api/channel'
// 导入编辑频道组件
import ChannelEdit from './components/channelEdit'
/**
 * 文章列表阅读记忆
 * 1. 当前列表上次滚动的位置=》记录下来
 * 2. 在切换页面的时候获取=》滚动到上次记录的位置（组件已经缓存了）
 *    1.
 */
// eslint-disable-next-line no-unused-vars
import { cbe } from '@/utils/esm'
cbe.d = 29999
export default {
  data () {
    return {
      // 频道数据（我的）
      channels: [],
      // 标签页当前选中的索引
      activeIndex: 0,
      // 是否显示编辑频道弹出层
      showEdit: false
    }
  },
  components: {
    ArticleList,
    ChannelEdit
  },
  // 处理refresh_token失效，回跳缓存不刷新问题
  watch: {
    '$store.state.user.token' () {
      console.log('refresh')
      this.getChannels()
    }
  },
  // 组件被缓存才会执行
  /**
   * 特点
   * 1. 默认第一加载也会执行
   * 2. 再次被打开会执行
   */
  activated () {
    console.log('组件被缓存，再次被打开会执行我！')
    // 动态获取对应索引的列表组件
    // console.log(this.$refs['alist' + this.activeIndex])
    this.$refs['alist' + this.activeIndex] && this.$refs['alist' + this.activeIndex][0].scrollToPos()
  },
  // deactivated () {
  //   console.log('组件被缓存，离开后执行我！')
  // },
  created () {
    console.log('index组件被创建了！')
    this.getChannels()
    // meng = 12
    console.log(cbe)
  },
  methods: {
    // 注册切换标签页事件
    switchTab () {
      console.log('切换标签页：', this.activeIndex)
      this.$refs['alist' + this.activeIndex] && this.$refs['alist' + this.activeIndex][0].scrollToPos()
    },
    // 取频道数据后台数据
    async getChannels () {
      const { data } = await getMyChannels()
      console.log(data)
      this.channels = data.channels
    }
  }
}
</script>

<style lang="less" scoped>
// 标签页自定义样式
.van-tabs {
  height: 100%;
  display: flex;
  flex-direction: column;
  // 自定义tab样式
  /deep/ .van-tabs__wrap {
    height: 36px;
    padding-right: 36px;
    .van-tab {
      line-height: 36px;
    }
    .van-tabs__line {
      background-color: #3296fa;
      height: 2px;
    }
  }
  /deep/ .van-tabs__content {
    flex: 1;
    overflow: hidden;
  }
  /deep/ .van-tab__pane {
    height: 100%;
    // 控制列表区域可滚动
    .scroll-wrapper {
      height: 100%;
      overflow-y: auto;
    }
  }
}
.bar_btn {
  width: 36px;
  height: 35px;
  position: absolute;
  top: 0;
  right: 0;
  font-size: 20px;
  text-align: center;
  line-height: 40px;
  box-shadow: -6px -6px 8px #ddd;
}
</style>
